<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <!-- js片段 -->
    <!-- jquery文件 -->
    <script src="/plugins/jquery-3.7.1.min.js"></script>

    <!-- css片段 -->
    <link rel="stylesheet" href="/css/login.css">
    <title>登录页面</title>
</head>

<body>

<!----------------------- Main Container -------------------------->

<div class="container d-flex justify-content-center align-items-center min-vh-100">

    <!----------------------- Login Container -------------------------->

    <div class="row border rounded-5 p-3 bg-white shadow box-area">

        <!--------------------------- Left Box ----------------------------->

        <div class="col-md-6 rounded-4 d-flex justify-content-center align-items-center flex-column left-box"
             style="background: #103cbe;">
            <div class="featured-image mb-3">
                <img src="/images/1.png" class="img-fluid" style="width: 250px;">
            </div>
            <p class="text-white fs-2" style="font-family: 'Courier New', Courier, monospace; font-weight: 600;">
                欢迎你!请先登录</p>
            <small class="text-white text-wrap text-center"
                   style="width: 17rem;font-family: 'Courier New', Courier, monospace;">欢迎来到成绩管理系统界面</small>
        </div>

        <!-------------------- ------ Right Box ---------------------------->

        <div class="col-md-6 right-box">
            <div class="row align-items-center">
                <div class="header-text mb-4">
                    <h2>成绩管理系统</h2>
                    <p>We are happy to have you back.</p>
                </div>
                <div class="input-group mb-3">
                    <input type="text" class="form-control form-control-lg bg-light fs-6" id="userno"
                           placeholder="用户编号">
                </div>
                <div class="input-group mb-1">
                    <input type="password" class="form-control form-control-lg bg-light fs-6" id="password"
                           placeholder="密码">
                </div>
                <div class="input-group mb-5 d-flex justify-content-between">
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="student" checked>
                        学生登录
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="teacher"> 教师登录
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="admin"> 管理员登录
                    </label>
                    <div class="form-check">

                    </div>
                </div>
                <div class="input-group mb-3">
                    <button class="btn btn-lg btn-primary w-100 fs-6" onclick="login();">登录</button>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- js片段 -->
<!-- 1.自己写的list.js文件 -->
<!-- 2.最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<!-- 3.bootstraptable文件 -->
<script src="/plugins/bootstrapTable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstrapTable/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- 4.jqvalidate文件 -->
<script src="/plugins/jqvalidate/jquery.validate.min.js"></script>
<script src="/plugins/jqvalidate/localization/messages_zh.min.js"></script>
<!-- 5.自己写的js -->
<script>
    // 登录
    function login() {
        var no = $("#userno").val();
        var password = $("#password").val();
        var option = null;
        var obj = document.getElementsByName("inlineRadioOptions")
        //遍历Radio
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked) {
                option = obj[i].value;
            }
        }

        $.ajax({
            url: "/webapi/login/" + option,
            data: {
                no: no,
                password: password
            }
        }).done(function (rs) {
            if (rs >= 0) {
                window.location.href = "/" + option + "/main";
            } else {
                alert(option + "编号或密码不正确，请重新输入！");
            }
        });
    }
</script>

</body>

</html>